<template>
  <div class="ticket-model-container ">
    <div class="ticket-title-container flex-normal">
      <div v-for="(tab, index) in tabList" :key="index" 
      :class="['title-content flex-center', tab.name == currentTab.name && 'active']"
      @click="tabChange(tab)">
        <span class="title-txt">{{tab.label}}（{{tab.list.length}}）</span>
      </div>
    </div>
    <div :class="['ticket-list-main', currentTab.name]"> 
      <span class="kcm-btn" v-if="currentTab.name == 'kcm' && isExport">导出待核销券码</span>
      <el-scrollbar>
        <!-- 库存券码 -->
        <template v-if="currentTab.name == 'kcm'">
          <el-input type="textarea" :autosize="{
            minRows: 10, maxRows: 10
          }" v-model="ticketStr" @blur="ticketChange"></el-input>
          <!-- <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-desc">{{item.cardRollCode}}</span>
          </div> -->
        </template>
        <!-- 已兑换 -->
        <template v-if="currentTab.name == 'ydh'">
          <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-num">{{item.cardRollCode}}</span>
            <span class="item-time">{{item.updateTime}}</span>
            <span class="item-desc">由</span>
            <span class="item-user">{{item.exchangeUserId}}</span>
            <span class="item-desc">在兑换</span>
          </div>
        </template>
        <!-- 已核销 -->
        <template v-if="currentTab.name == 'yhx'">
          <div class="item flex-normal" v-for="(item, index) in currentTab.list" :key="index">
            <span class="item-num">{{item.cardRollCode}}</span>
            <span class="item-time">{{item.updateTime}}</span>
            <span class="item-desc">由</span>
            <span class="item-user">疯狂的校长</span>
            <span class="item-desc">在</span>
            <span class="item-user">天猫养车（江宁店）</span>
            <span class="item-desc">核销</span>
          </div>
        </template>
        <!-- 已分配 -->
      </el-scrollbar>
    </div>
    <div class="ticket-desc flex-normal">
      <i class="desc-icon el-icon-info"></i>
      <span class="desc-txt">如需增加库存，请直接在库存券码中追加，每行一个</span>
    </div>
  </div>
</template>

<script>
const tabList = [
  {label: '库存券码', name: 'kcm', list: []},
  {label: '已兑换', name: 'ydh', list: []},
  {label: '已核销', name: 'yhx', list: []},
  {label: '已分配', name: 'yfp', list: []},
]
export default {
  name: 'ticketModel',
  props: {
    arr: {
      type: Array,
      default: ['库存券码', '已兑换', '已核销']
    },
    cardList: {
      type: Array,
      default: () => []
    },
    isExport: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    arr: {
      handler: function (list) {
        let _self = this
        _self.tabList = tabList.filter(tab => list.includes(tab.label))
        _self.currentTab = _self.tabList[0]
      },
      immediate: true
    },
    options: {
      handler: function (list) {
        let _self = this
        if(!list) return
        _self.tabList.forEach(tab => {
          if(tab.name == 'kcm') {
            _self.$set(tab, 'list', list)
            _self.ticketStr = tab.list.map(i => i.cardRollCode).join('\n')
            _self.$emit('change', tab.list.filter(i => !i.id))
          }else if(tab.name == 'ydh'){
            _self.$set(tab, 'list', list.filter(i => i.exchange == 1))
          }
        })
      },
      immediate: true
    }
  },
  data() {
    return {
      currentTab: {},
      tabList: [],
      ticketStr: '',
      options: this.cardList || []
    }
  },
  mounted(){
    this.options = this.cardList
  },
  methods: {
    searchItem(code){
      let _self = this
      let item = _self.options.find(i => i.cardRollCode == code)
      if(!item) return [{cardRollCode: code}]
      return []
    },
    ticketChange(){
      let _self = this
      let arr = _self.ticketStr.split(/[(\r\n)\r\n]+/)
      arr.forEach((i, idx) => {
        if(i.trim() != ''){
          _self.options = [..._self.options, ..._self.searchItem(i)]
        }
      })
      console.log(_self.options, 999)
    },
    tabChange(tab){
      let _self = this
      _self.currentTab = tab
    }
  }
}
</script>

<style lang="scss" scoped>
.ticket-model-container{
  .ticket-title-container{
    .title-content{
      height: vh(40);
      margin-right: vw(30);
      cursor: pointer;
      &.active{
        .title-txt{
          color: #0003AA;
          font-size: 13px;
        }
      }
      .title-txt{
        color: #666666;
        font-size: 13px;
      }
    }
  }
  .ticket-list-main{
    border: 1px solid #DDDDDD;
    border-radius: vh(3);
    padding: vh(13) vw(12);
    overflow: hidden;
    height: vh(300);
    margin-top: vh(10);
    background: rgba(237, 237, 237, 0.4);
    position: relative;
    line-height: normal;
    .kcm-btn{
      position: absolute;
      font-size: vh(12);
      color: #0003AA;
      bottom: vh(15);
      right: vw(10);
      cursor: pointer;
      z-index: 100;
    }
    .kcm-val-content{
      min-height: vh(200);
      font-size: 13px;
    }
    .item{
      padding-right: vw(25);
      margin-bottom: vh(15);
      .item-num, .item-user{
        font-size: 13px;
        color: #0003AA;
      }
      .item-time, .item-desc{
        font-size: 13px;
        color: #9E9D9D;
        margin: 0 vw(10);
      }
    }
  }
  .ticket-desc{
    margin-top: vh(10);
    .desc-icon{
      color: #F7B212;
    }
    .desc-txt{
      margin-left: vw(10);
      font-size: vh(12);
      color: #7F7F7F;
    }
  }
}
</style>
